<template>
  <div>
        <h3>{{combined.comName}}</h3>
		<el-button type="primary" @click="dialogaddInsurance(insurance)">添加</el-button>
		<table
		  width="100%"
		  border="0"
		  cellspacing="1"
		  cellpadding="4"
		  bgcolor="#cccccc"
		  class="tabtop13"
		  align="center"
		>
		  <tr></tr>
		  <tr>
		    <td>保险类型</td>
		    <td v-for="gt in combined.guarantees">{{ gt.context }}</td>
			<td>保险价格</td>
			<td>操作</td>
		  </tr>
		  <tr v-for="ins in combined.insurances">
		    <td>{{ ins.insuranceName }}</td>
		    <td v-for="inc in ins.insGuas">{{ inc.insuranceMoney }}</td>
			<td>{{ins.insurancePrice}}</td>
			<td>
				<el-button type="primary" icon="el-icon-edit" @click="dialogaddInsurance(ins)"></el-button>
			</td>
		  </tr>
		</table>
    <el-dialog
      title="保障"
      :visible.sync="dialogFormVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <el-form>
		<el-form-item label="保险名" :label-width="formLabelWidth">
		  <el-input v-model="insurance.insuranceName" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="保险价格" :label-width="formLabelWidth">
		  <el-input v-model="insurance.insurancePrice" autocomplete="off"/>
		</el-form-item>
		<div v-for="ig in insurance.insGuas">
			<span>{{ig.context}}</span><el-input v-model="ig.insuranceMoney" autocomplete="off"></el-input>
		</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addInsurance()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="是否删除"
      :visible.sync="dialogFormVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">否</el-button>
        <el-button type="primary" @click="deleteInsurance()">是</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      combinedId: null,
      guarantees: [],
      combined: {},
	  insurance: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
	dialogaddInsurance(insurance){
		this.insurance = insurance;
		this.dialogFormVisible1 = true;
	},
	addInsurance(){
		this.dialogFormVisible1 = false;
		const vm = this;
		this.axios({
		  method: "post",
		  url: "http://localhost:8081/admin/combined/saveOrUpdate/Insurance",
		  data: this.insurance,
		})
		  .then((response) => {
		    console.log("获取数据成功", response);
          vm.combined = response.data.content;
		  vm.insurance = response.data.content.insurance;
		  })
		  .catch((error) => {
		    console.log("获取数据失败", error);
		  });
	},
	
	dialogdelInsurance(insurance){
		this.insurance = insurance;
		this.dialogFormVisible2 = true;
	},
	
	deleteInsurance() {
	  this.dialogFormVisible2 = false;
	  const vm = this;
	  this.axios({
	    method: "get",
	    url: "http://localhost:8081/admin/combined/delete/Insurance/" + this.insurance.combinedId + "/" +this.insurance.insuranceId,
	  })
	    .then((response) => {
	      console.log("获取数据成功", response);
          vm.combined = response.data.content;
		  vm.insurance = response.data.content.insurance;
	    })
	    .catch((error) => {
	      console.log("获取数据失败", error);
	    });
	},
	
    init() {
      const vm = this;
      this.axios({
        method: "get",
        url: "http://localhost:8081/admin/combined/listComInsCov/" + this.$route.params.id,
      })
        .then((response) => {
          console.log("获取数据成功", response);
          vm.combined = response.data.content;
		  vm.insurance = response.data.content.insurance;
        })
        .catch((error) => {
          console.log("获取数据失败", error);
        });
    },
  },
};
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}
.tabtop13 {
  margin-top: 13px;
  width: 800px;
}
.tabtop13 td {
  background-color: #ffffff;
  height: 25px;
  line-height: 150%;
}
.font-center {
  text-align: center;
}
</style>
